<template>
    <!-- 库存单据查询 -->
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24">
            <el-form  :inline="true"
                        ref="queryRef"
                        :model="queryParams"
                        label-width="100px">
                <el-form-item label="系统单号" prop="systematicReceipt">
                    <el-input
                    v-model="queryParams.systematicReceipt"
                    placeholder="请输入"
                    style="width: 200px;"
                    clearable/>
                </el-form-item>
                <el-form-item label="原始单号" prop="originalReceipt">
                    <el-input
                        v-model="queryParams.originalReceipt"
                        placeholder="请输入"
                        style="width: 200px;"
                        clearable/>
                </el-form-item>
                <el-form-item label="单据类型" prop="receiptType">
                    <el-select
                        v-model="queryParams.receiptType"
                        placeholder="单据类型"
                        clearable
                        style="width: 200px;">
                        <el-option
                            v-for="dict in receipt_type"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="单据状态" prop="receiptStatus">
                <el-select
                    v-model="queryParams.receiptStatus"
                    placeholder="单据状态"
                    clearable
                    style="width: 200px;">
                    <el-option
                        v-for="dict in receipt_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
                </el-form-item>
                <el-form-item label="调入仓库" prop="warehousingIds">
                <el-select style="width: 200px;" v-model="queryParams.warehousingIds" placeholder="请选择">
                    <el-option
                        v-for="item in warehouseOptions"
                        :key="item.warehouseId"
                        :label="item.warehouseName"
                        :value="item.warehouseId"
                    ></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="调出仓库" prop="retrievalIds">
                <el-select style="width: 200px;" v-model="queryParams.retrievalIds" placeholder="请选择">
                    <el-option
                        v-for="item in warehouseOptions"
                        :key="item.warehouseId"
                        :label="item.warehouseName"
                        :value="item.warehouseId"
                    ></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="经手人" prop="userIds">
                <el-select style="width: 200px;" v-model="queryParams.userIds" placeholder="请选择">
                    <el-option
                        v-for="item in userOptions"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId"
                    ></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="供应商" prop="supplierIds">
                    <el-select style="width: 200px;" v-model="queryParams.supplierIds" placeholder="请选择">
                    <el-option
                        v-for="item in supplierOptions"
                        :key="item.supplierId"
                        :label="item.supplierName"
                        :value="item.supplierId"
                    ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户" prop="customerIds">
                <el-select style="width: 200px;" v-model="queryParams.customerIds" placeholder="请选择">
                    <el-option
                        v-for="item in customerOptions"
                        :key="item.customerId"
                        :label="item.customerName"
                        :value="item.customerId"
                    ></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="货品编号" prop="productCode">
                <el-input
                    v-model="queryParams.productCode"
                    placeholder="请输入货品编号"
                    style="width: 200px;"/>
                </el-form-item>
                <el-form-item label="货品名称" prop="productName">
                <el-input
                    v-model="queryParams.productName"
                    placeholder="请输入货品名称"
                    style="width: 200px;"/>
                </el-form-item>
                <el-form-item label="创建时间" style="width: 388px;">
                <el-date-picker
                    v-model="dateRange"
                    value-format="YYYY-MM-DD"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button
                    type="primary"
                    icon="Search"
                    @click="handleQuery"
                    v-hasPermi="['system:inventory:headreceiptquery']"
                    >查询</el-button>
                    <el-button
                    type="success"
                    icon="Search"
                    @click="handleDetailQuery"
                    v-hasPermi="['system:inventory:detailreceiptquery']"
                    >明细查询</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
            <el-col :span="21">
                <span>查询结果</span>
            </el-col>
            <el-col :span="1.5">
                <el-button
                v-if="inventoryHead"
                type="warning"
                plain
                icon="Download"
                @click="handleExport"
                v-hasPermi="['system:inventory:headreceiptexport']"
                >导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                v-if="inventoryDetail"
                type="danger"
                plain
                icon="Download"
                @click="handleDetailExport"
                v-hasPermi="['system:inventory:detailreceiptexport']"
                >明细导出</el-button>
            </el-col>
            </el-row>

            <!-- 头表数据 -->
            <el-table
            border
            v-if="inventoryHead"
            v-loading="loading"
            :data="headReceiptList">
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column label="系统单号" align="center" prop="systematicReceipt" width="180"/>
                <el-table-column label="原始单号" align="center" prop="originalReceipt"/>
                <el-table-column label="单据类型" align="center" prop="receiptType">
                    <template #default="scope">
                    <dict-tag :options="receipt_type" :value="scope.row.receiptType" />
                    </template>
                </el-table-column>
                <el-table-column label="单据状态" align="center" prop="receiptStatus">
                    <template #default="scope">
                    <dict-tag :options="receipt_status" :value="scope.row.receiptStatus" />
                    </template>
                </el-table-column>
                <el-table-column label="发生日期" align="center" prop="invoiceDate"/>
                <el-table-column label="调入仓库" align="center" prop="warehousing.warehousingName"/>
                <el-table-column label="调出仓库" align="center" prop="retrieval.retrievalName"/>
                <el-table-column label="经手人" align="center" prop="sysUser.userName"/>
                <el-table-column label="供应商" align="center" prop="supplier.supplierName"/>
                <el-table-column label="客户" align="center" prop="customer.customerName"/>
                <el-table-column label="订单号" align="center" prop="planReceipt"/>
                <el-table-column label="备注" align="center" prop="receiptNotes" :show-overflow-tooltip="true"/>
                <el-table-column label="创建者" align="center" prop="createBy"/>
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="更新者" align="center" prop="updateBy"/>
                <el-table-column label="更新时间" align="center" prop="updateTime" :show-overflow-tooltip="true">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.updateTime) }}</span>
                </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="120" class-name="small-padding fixed-width">
                    <template #default="scope">
                    <el-tooltip content="打印">
                        <el-button
                        link
                        type="primary"
                        icon="Printer"
                        @click="printOut(scope.row)"
                        v-hasPermi="['system:inventory:printout']"
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip content="修改" placement="top">
                        <el-button
                        link
                        type="primary"
                        icon="Edit"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:inventory:update']"
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="top">
                        <el-button
                        link
                        type="primary"
                        icon="Delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['system:inventory:remove']"
                        ></el-button>
                    </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <pagination
                v-if="inventoryHead"
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"/>
            <!-- 明细表数据 -->
            <el-table
                border
                v-if="inventoryDetail"
                v-loading="loading"
                :data="detailReceiptList">
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column label="货品编号" align="center" prop="product.productCode"/>
                <el-table-column label="货品名称" align="center" prop="product.productName"/>
                <el-table-column label="货品类型" align="center" prop="type.productTypeName"/>
                <el-table-column label="规格" align="center" prop="product.productSpecifications"/>
                <el-table-column label="单位" align="center" prop="product.measureUnit"/>
                <el-table-column label="产地" align="center" prop="product.producer"/>
                <el-table-column label="数量" align="center" prop="planQuantity"/>
                <el-table-column label="单价" align="center" prop="univalence"/>
                <el-table-column label="折扣" align="center" prop="discount"/>
                <el-table-column label="金额" align="center" prop="money"/>
                <el-table-column label="成本" align="center" prop="cost"/>
                <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
            </el-table>
            <!-- 分页组件 -->
            <pagination
                v-if="inventoryDetail"
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getDetailList"/>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="InventoryDocumentQuery">
import { useRouter } from 'vue-router';
import { listWarehouse } from '@/api/basedate/warehouse';
import { listsUser } from '@/api/system/user';
import { listsSupplier } from '@/api/basedate/supplier';
import { listsCustomer } from '@/api/basedate/customer';
import { headReceiptQuery, detailReceiptQuery, getHeadReceipt, delInventoryReceipt } from '@/api/system/inventory';

const { proxy } = getCurrentInstance();
const { receipt_type } = proxy.useDict("receipt_type");
const { receipt_status } = proxy.useDict("receipt_status");

// 查询结果表
const headReceiptList = ref([]);
const detailReceiptList = ref([]);
const userOptions = ref(undefined);
const supplierOptions = ref(undefined);
const customerOptions = ref(undefined);
const warehouseOptions = ref(undefined);
// 查询表展示
const inventoryHead = ref(true);
// 查询明细表展示
const inventoryDetail = ref(false);
// 加载
const loading = ref(true);
// 总条数
const total = ref(0);
// 窗口标题
const title = ref("");
// 数据范围
const dateRange = ref([]);
const router = useRouter();

const data = reactive({
    form: {},
    fileForm: {},
    queryParams: {
    pageNum: 1,
    pageSize: 10,
    systematicReceipt: undefined,
    originalReceipt: undefined,
    receiptType: undefined,
    receiptStatus: undefined,
    warehousingIds: undefined,
    retrievalIds: undefined,
    userIds: undefined,
    supplierIds: undefined,
    customerIds: undefined,
    productCode: undefined,
    productName: undefined,
    },
    rules: {},
});

const { queryParams, fileForm, form, rules } = toRefs(data);

function Options() {
    listWarehouse().then(response => {
        warehouseOptions.value = response.rows;
    });
    listsSupplier().then(response => {
        supplierOptions.value = response.rows;
    });
    listsCustomer().then(response => {
        customerOptions.value = response.rows;
    });
    listsUser().then(response => {
        userOptions.value = response.rows;
    });
};
/** 查询库存头单列表 */
function getList() {
    loading.value = true;
    headReceiptQuery(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    headReceiptList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    });
};
/** 查询库存明细列表 */
function getDetailList() {
    loading.value = true;
    detailReceiptQuery(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    detailReceiptList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    });
};
/** 查询按钮操作 */
function handleQuery() {
    inventoryHead.value = true;
    inventoryDetail.value = false;
    queryParams.value.pageNum = 1;
    getList();
};
/** 明细查询按钮操作 */
function handleDetailQuery() {
    inventoryHead.value = false;
    inventoryDetail.value = true;
    queryParams.value.pageNum = 1;
    getDetailList();
};
/** 重置按钮操作 */
function resetQuery() {
    dateRange.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
};
/** 重置操作表单 */
function reset() {
    form.value = {
    originalReceipt: undefined,
    receiptType: undefined,
    warehousingIds: undefined,
    retrievalIds: undefined,
    customerIds: undefined,
    productCode: undefined,
    productName: undefined,
    };
    proxy.resetForm("queryRef");
    inventoryHead.value = true;
    inventoryDetail.value = false;
};
/** 打印按钮 */
function printOut(row) {
    proxy.$modal.msgWarning('打印模块开发中，尽情期待！')
};
/** 修改按钮操作 */
function handleUpdate(row) {
    const systematicReceipt = row.systematicReceipt;
    const receiptType = row.receiptType;
    if (receiptType == 1){
    router.push({path: '/procure/WarehouseReceipt', query: {systematicReceipt}})
    } else if (receiptType == 2){
    router.push({path: '/procure/RetreatWarehouse', query: {systematicReceipt}})
    } else if (receiptType == 3){
    router.push({path: '/sales/salesOutbound', query: {systematicReceipt}})
    } else if (receiptType == 4){
    router.push({path: '/sales/salesRetreat', query: {systematicReceipt}})
    } else if (receiptType == 5){
    router.push({path: '/inventory/storageOther', query: {systematicReceipt}})
    } else if (receiptType == 6){
    router.push({path: '/inventory/outboundOther', query: {systematicReceipt}})
    } else if (receiptType == 7){
    router.push({path: '/inventory/InventoryTransfer', query: {systematicReceipt}})
    } else if (receiptType == 8){
    router.push({path: '/inventory/InventoryCounting', query: {systematicReceipt}})
    }

};
/** 删除按钮操作 */
function handleDelete(row) {
    const systematicReceipt = row.systematicReceipt;
    getHeadReceipt(systematicReceipt).then(response => {
    const details = response.data.detail;
    proxy.$modal.confirm('确认要删除编号为' + systematicReceipt + '的单据?').then(function () {
        return delInventoryReceipt(details);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
    })
};
/** 导出按钮操作 */
function handleExport() {
    proxy.download("system/inventory/headReceiptExport", {
    ...queryParams.value,
    }, `单据表_${new Date().getTime()}.xlsx`);
};
/** 明细导出按钮操作 */
function handleDetailExport() {
    proxy.download("system/inventory/detailReceiptExport", {
    ...queryParams.value,
    }, `单据明细表_${new Date().getTime()}.xlsx`);
};
getList();
Options();
</script>